<template>
	<div>
		<div v-if="!addVisible">
			<div class="topTitle">专题列表</div>
			<el-form :model="query" inline label-width="auto">
				<el-form-item lable="专题名称">
					<el-input placeholder="请输入" class="width260 margin-right10" v-model="query.name"></el-input>
				</el-form-item>
				<el-form-item label="专题分类">
					<el-select placeholder="请选择专题分类" class="width260 margin-right10" v-model="query.categoryId">
						<el-option v-for="item in subjectCategoryList" :key="item.id" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属地区">
					<el-cascader :props="props" v-model="query.city" :options="areaData" placeholder="请选择地区"
						class="width260 margin-right10"></el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleRefresh">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="margin-top20 margin-bottom20 row-me">
				<el-button type="primary" @click="handleAdd">新建</el-button>
				<el-button type="primary" @click="handleBatchDel">批量删除</el-button>
				<div class="flex1"></div>
				<el-button type="primary" @click="typeVisible=true">分类管理</el-button>
				<el-button type="primary" @click="configVisible = true">常见问题配置</el-button>
			</div>
			<el-table :data="tableData" border header-cell-class-name="table-header-style"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="80" align="center"> </el-table-column>
				<el-table-column type="index" label='序号' width="80" align="center"></el-table-column>
				<el-table-column label="专题图片" align="center">
					<template slot-scope="scope">
						<el-image class="width80" fit="scale-down" :src="scope.row.img" :preview-src-list="[scope.row.img]">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="专题名称" align="center" prop="name"></el-table-column>
				<el-table-column label="题目数量" align="center" prop="counts"></el-table-column>
				<el-table-column label="价格(元)" align="center" prop="price"></el-table-column>
				<el-table-column label="专题分类" align="center" prop="specialSubjectCategory.name"></el-table-column>
				<el-table-column label="发布地区" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.provinceName||''}}</span>
						<span v-if="scope.row.province!=0">{{scope.row.cityName||''}}</span>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="sort"></el-table-column>
				<el-table-column label="评价" align="center">
					<template slot-scope="scope">
						<el-button type="text" @click="handleComment(scope.row)">查看评价</el-button>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" @change="val=>statusChange(val,scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" @click="handleAdd(scope.row)">编辑</el-button>
						<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
						<el-dropdown>
							<span class="el-dropdown-link" style="color: #1890ff;">更多 </span>
							<el-dropdown-menu slot="dropdown" align="center" style="color: #1890ff;">
								<el-dropdown-item @click.native="handleGive(scope.row)"> <span>赠送</span> </el-dropdown-item>
								<el-dropdown-item @click.native="handleTopping(scope.row)">{{scope.row.recommend?'取消置顶':'置顶'}}
								</el-dropdown-item>
								<el-dropdown-item @click.native="viewComments(scope.row)">
									<span>专题目录</span>
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange">
				</el-pagination>
			</div>
		</div>

		<!-- 赠送弹窗 -->
		<el-dialog title="赠送专题" :visible.sync="dialogVisiblegive" width="60%">
			<el-form ref="form" :model="sendForm">
				<el-form-item label="专题名称:" label-width="120px">
					<span class="bigText">{{subjectObj.name||''}}</span>
				</el-form-item>
				<el-form-item label="选择赠送用户:" label-width="120px">
					<div class="row-me">
						<el-input v-model="sendForm.search" placeholder="请输入用户昵称/ID或手机号" class="width250"></el-input>
						<el-button class="margin-left10" type="primary" @click="getUserPage">确认</el-button>
					</div>
					<div class="margin-top20">
						<el-tag v-for="(item,index) in userData" :key="item.id" closable :disable-transitions="false"
							@close="handleClose(item,index)" class="margin-right10">
							{{item.name}}
						</el-tag>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblegive = false">取消</el-button>
				<el-button type="primary" @click="clickSend">确认赠送</el-button>
			</span>
		</el-dialog>

		<!-- 专题目录弹框 -->
		<el-dialog title="专题目录" :visible.sync="viewCommentsVisible" width="60%">
			<el-table :data="directoryData" border default-expand-all row-key="id"
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column label="专题名称" align="center" prop="name"></el-table-column>
				<el-table-column label="专题试卷" align="center" prop="examName"></el-table-column>
				<el-table-column label="题目数量" align="center" prop="questionCount"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleviewComments = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 常见问题配置 -->
		<el-dialog title="常见问题配置" :visible.sync="configVisible" width="40%">
			<el-input placeholder="请输入" type="textarea" rows="8" v-model="configParams.value"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="configVisible = false">取 消</el-button>
				<el-button @click="handleConfigSave" type="primary">确 认</el-button>
			</span>
		</el-dialog>

		<!-- 查看评论 -->
		<el-dialog title="查看评论" :visible.sync="commentVisible" width="60%">
			<el-button type="primary" class="margin-bottom20" @click="clickAddComment">新增虚拟评价</el-button>
			<el-table :data="commentData" border header-cell-class-name="table-header-style">
				<el-table-column type="expand">
					<template slot-scope="scope">
						<div v-if="scope.row.images">
							<el-image class="width80" v-for="(item,index) in scope.row.images.split(',')" :key="index" :src="item"
								:preview-src-list="[item]">
							</el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="用户头像/昵称">
					<template slot-scope="scope">
						<div class="row-me row-center">
							<el-image class="width80" :src="scope.row.userIcon" :preview-src-list="[scope.row.userIcon]">
							</el-image>
							<span class="margin-left10">{{scope.row.userName||''}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="评论内容" prop="content"></el-table-column>
				<el-table-column label="评论时间" prop="createTime"></el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<el-button type="text" @click="commentIsTop(scope.row)">{{scope.row.recommend?'取消置顶':'置顶'}}</el-button>
						<el-button type="text" @click="clickAddComment(scope.row)">编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleCommentDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleCommentSizeChange" :current-page="commentParams.pageNumber" :total="commentPageTotal"
					@current-change="handleCommentPageChange">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="commentVisible = false" type='primary'>关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 新增编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="addCommentVisible" width="600px">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="用户名称">
					<el-input placeholder="请输入用户名称" v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<div class="row-me flex-end2">
						<el-image v-if="form.userIcon" class="width80 height80" :src="form.userIcon"
							:preview-src-list="[form.userIcon]"></el-image>
						<el-button type="text" @click="clickImg" class="margin-left10">上传头像</el-button>
					</div>
				</el-form-item>
				<el-form-item label="选择标签">
					<el-select placeholder="请选择" v-model="form.specialLabelIds" multiple>
						<el-option v-for="(item,index) in tagData" :key="index" :label="item.name" :value="item.id+''"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="评价内容">
					<el-input placeholder="请输入用户内容" v-model="form.content"></el-input>
				</el-form-item>
				<el-form-item label="评价时间">
					<el-date-picker v-model="form.createTime" type="datetime" placeholder="选择评价时间"
						value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addCommentVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleCommentSave">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 分类管理 -->
		<el-dialog title="分类管理" :visible.sync="typeVisible" width="40%">
			<el-table :data="typeTableData" border>
				<el-table-column label="标签名称" align="center">
					<template slot-scope="{row}">
						<el-input v-model="row.name" v-if="row.isEdit"></el-input>
						<span v-else>{{row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isEdit" @click="handleTypeAdd(scope.row)">保存</el-button>
						<el-button type="text" @click="$set(scope.row,'isEdit',true)" v-else>编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleTypeDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="typeQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeTypeChange" :page-size="typeQuery.pageSize"
					:total="pageTypeTotal" @current-change="handlePageTypeChange"></el-pagination>
			</div>
			<div class="margin-top20 row-me center-all">
				<el-input v-model="typeQuery.name" placeholder="请输入分类名称" class="margin-right20 width300"
					@input="$forceUpdate()"></el-input>
				<el-button type="primary" @click="handleTypeAdd">新增</el-button>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="typeVisible = false">关 闭</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>

		<div v-if="addVisible">
			<newTopic ref="newTopic" @handleOk="handleOk"></newTopic>
		</div>
	</div>
</template>

<script>
	import newTopic from "@/components/newTopic"
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			newTopic,
			imgLibrary
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				areaData: [],
				props: {
					emitPath: false,
					value: 'id',
					label: 'name',
					checkStrictly: true,
				},
				multipleSelection: [],
				sendForm: {},
				subjectObj: {},
				dialogVisiblegive: false,
				userData: [],
				directoryData: [],
				viewCommentsVisible: false,
				configVisible: false,
				configParams: {},
				commentVisible: false,
				commentParams: {
					pageNumber: 1,
					pageSize: 30
				},
				commentPageTotal: 0,
				commentData: [],
				addVisible: false,
				addCommentVisible: false,
				form: {},
				title: '',
				subjectCategoryList: [],
				tagData: [],
				typeVisible: false,
				typeTableData: [],
				typeQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTypeTotal: 0,
			}
		},
		mounted() {
			this.getAllArea()
			this.getData()
			this.getByKey()
			this.getSubjectCategory()
			this.getTagData()
			this.getTypeData()
		},
		methods: {
			//专题上下架
			async statusChange(val, row) {
				const res = await this.$postForm('/admin/specialSubject/updateUnmont', {
					id: row.id,
					status: val
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			//分类分页
			handlePageTypeChange(val) {
				this.typeQuery.pageNumber = val
				this.getTypeData();
			},
			handleSizeTypeChange(val) {
				this.typeQuery.pageSize = val
				this.getTypeData();
			},
			// 新增编辑分类
			handleTypeAdd(row) {
				let url = '/admin/specialSubject/subjectCategoryAdd'
				let params = {
					name: this.typeQuery.name
				}
				if (row.id) {
					url = "/admin/specialSubject/subjectCategoryUpdate"
					params = {
						id: row.id,
						name: row.name
					}
				}
				this.$post(url, params).then(res => {
					if (res.code == 1000) {
						this.$message.success('操作成功')
						this.typeQuery.name = ''
						this.getTypeData()
					}
				})
			},
			//删除分类
			async handleTypeDel(id) {
				const res = await this.$postForm('/admin/specialSubject/subjectCategoryDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getTypeData()
				}
			},
			//获取分类数据
			async getTypeData() {
				const res = await this.$get('/admin/specialSubject/pageSubjectCategory', this.typeQuery)
				if (res.code == 1000) {
					this.typeTableData = res.data.list
					this.pageTypeTotal = res.data.totalRow
				}
			},
			//获取标签
			async getTagData() {
				const res = await this.$get('/admin/specialSubject/pageSubjectLabel', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.tagData = res.data.list
				}
			},
			async getSubjectCategory() {
				const res = await this.$get('/admin/specialSubject/pageSubjectCategory', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.subjectCategoryList = res.data.list
				}
			},
			clickAddComment(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
					this.form.specialLabelIds = this.form.specialLabelIds ? this.form.specialLabelIds.split(',') : ''
				} else {
					this.title = '新增'
					this.form = {}
				}
				this.addCommentVisible = true
			},
			//删除
			async handleCommentDel(id) {
				const res = await this.$postForm('/admin/specialSubject/commentDeleted', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getCommentData()
				}
			},
			//置顶
			async commentIsTop(row) {
				let recommend = row.recommend ? false : true
				const res = await this.$postForm('/admin/specialSubject/commentIsTop', {
					id: row.id,
					recommend
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getCommentData()
				}
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			//获取选中的图片
			handleImgOk(data) {
				this.$set(this.form, 'userIcon', data)
			},
			async handleCommentSave() {
				this.form.specialLabelIds = this.form.specialLabelIds ? this.form.specialLabelIds.toString() : ''
				this.form.specialId = this.commentParams.specialId
				let url = '/admin/specialSubject/commentAdd'
				if (this.form.id) {
					url = '/admin/specialSubject/commentUpdate'
				}
				const res = await this.$post(url, this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getCommentData()
					this.addCommentVisible = false
				}
			},
			handleAdd(row = {}) {
				this.addVisible = true
				setTimeout(() => {
					this.$refs.newTopic.show(row)
				})
			},
			handleOk() {
				this.addVisible = false
				this.getData()
			},
			//评论分页
			handleCommentPageChange(val) {
				this.commentParams.pageNumber = val
				this.getCommentData()
			},
			handleCommentSizeChange(val) {
				this.commentParams.pageSize = val
				this.getCommentData()
			},
			//查看评论
			handleComment(row) {
				this.commentVisible = true
				this.commentParams.specialId = row.id
				this.getCommentData()
			},
			async getCommentData() {
				const res = await this.$get('/admin/specialSubject/pageSubjectComment', this.commentParams)
				if (res.code == 1000) {
					this.commentData = res.data.list
					this.commentPageTotal = res.data.totalRow
				}
			},
			//批量删除
			handleBatchDel() {
				this.$confirm('确定要批量删除已选中试题吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$post('/admin/specialSubject/deleteSubject', ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {})
			},
			async getByKey() {
				const res = await this.$get('/admin/config/getByKey', {
					key: 'special_common'
				})
				if (res.code == 1000) {
					this.configParams = res.data ? res.data : {
						keyword: 'special_common'
					}
				}
			},
			// 确认配置
			async handleConfigSave() {
				if (this.configParams.type) {
					this.configParams.type = this.configParams.type.value
				}
				const res = await this.$post('/admin/config/update', this.configParams)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getByKey()
					this.configVisible = false
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			//专题目录
			viewComments(row) {
				this.subjectObj = row
				this.getDetail()
			},
			//获取专题详情
			async getDetail() {
				const res = await this.$get('/admin/specialSubject/getDetail', {
					id: this.subjectObj.id
				})
				if (res.code == 1000) {
					this.directoryData = res.data.children || []
					for (let val of this.directoryData) {
						if (val.children && val.children.length != 0) {
							for (let item of val.children) {
								this.$set(item, 'examName', item.examPaper ? item.examPaper.name : '')
								this.$set(item, 'questionCount', item.examPaper ? item.examPaper.questionCount : '')
							}
						}
					}
					this.viewCommentsVisible = true
				}
			},
			//置顶/取消置顶
			async handleTopping(row) {
				let isTopping = row.recommend ? false : true
				const res = await this.$postForm('/admin/specialSubject/recommend', {
					id: row.id,
					recommend: isTopping
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			//确认赠送
			async clickSend() {
				let ids = Array.from(this.userData, ({
					id
				}) => id)
				const res = await this.$post(`/admin/specialSubject/sendSubjectOrderToUser?subjectId=${this.subjectObj.id}`,
					ids)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
					this.dialogVisiblegive = false
				}
			},
			async getUserPage() {
				if (this.$.isEmpty(this.sendForm.search)) return
				const res = await this.$get('/admin/user/findByIdTelName', {
					search: this.sendForm.search
				})
				if (res.code == 1000) {
					this.userData = res.data
				}
			},
			// 可编辑标签tag
			handleClose(item, index) {
				this.userData.splice(index, 1)
			},
			async getData() {
				const res = await this.$get('/admin/specialSubject/pageSubject', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//分页
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData()
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData()
			},
			//赠送
			handleGive(row) {
				this.sendForm = {}
				this.subjectObj = row
				this.dialogVisiblegive = true
			},
			//删除
			async handleDel(id) {
				const res = await this.$post('/admin/specialSubject/deleteSubject', [id])
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = res.data
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
		}
	}
</script>

<style>
</style>